<template>
	<view class="container">
		<view class="list">
			<view 
				class="item"
				v-for="(item, index) in list"
				:key="index"
				@click="onItemClick(item, index)"
			>
				<view 
				class="top"
				:class="item.status == 2 ? 'success' : item.status == 3 ? 'done' : ''"
				>
					<view class="h1">{{item.flowrate}}</view>
					<view class="h2">{{item.name_desc}}</view>
					<view class="p">{{item.card_no}}</view>
					<view class="a" v-if="item.status == 1">激活</view>
				</view>
				
				<view class="bottom">
					<view class="p">有效期：{{item.valid_time}}</view>
				</view>
				
				<view class="icon" v-if="item.status == 1"><image src='../../../static/images/icon_card_status_4.png' ></image></view>
				<view class="icon success" v-if="item.status == 2"><image src='../../../static/images/icon_card_status_5.png' ></image></view>
				<view class="icon done" v-if="item.status == 3"><image src='../../../static/images/icon_card_status_1.png' ></image></view>
			</view>
		</view>
		
		<uni-load-more v-if="loadingMore" :status="loadingMore ? 'loading' : ''"></uni-load-more>
	</view>
</template>

<script>
	import { 
		runGetVideoCard
	} from '@/module/api'
	import { formatDateTime } from '@/common/util'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	
	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		components: {uniLoadMore},
		
		data() {
			return {
				loaded: false,
				page: 1,
				loadingMore: true,
				isEmpty: true,
				isSelect: false,
				list: [],
			};
		},
		
		computed: {
			shareAppMessage () {
				return this.$store.state.shareAppMessage
			},
			
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		onLoad(params) {
			let _t = this
			this.getPageData()
		},
		
		onReachBottom () {
			if(this.loadingMore) return false
			if(this.isEmpty) return false
			if(!this.loaded) return false
			
			this.page++
			this.loadingMore = true
			this.getPageData()
		},
		
		methods: {
			onPageResfresh () {
				this.page = 1
				this.isEmpty = false
				this.loadingMore = true
				this.getPageData()
			},
			
			handleSubmit (item) {
				let _t = this
				
				let data = {
					mobile: this.userInfo.name,
					id: item.id,
					uid: this.userInfo.id,
					act:'recharge'
				}
				
				uni.showLoading({
					mask: true,
					title: '请求中...'
				})
				
				runGetVideoCard({
					params: data,
					success: res => {
						uni.hideLoading()
						uni.navigateTo({
							url: '/pages/video-card/result/result?status=1&from=list&res=' + JSON.stringify(res)
						})
						_t.onPageResfresh()
					},
					fail: res => {
						uni.hideLoading()
						if (res.code == -3000) {
							uni.navigateTo({
								url: '/pages/video-card/result/result?status=0&from=list&res=' + JSON.stringify(res)
							})
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
						
					},
					error: () => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: "系统繁忙，请稍候再试"
						})
					}
				})
			},
			
			onItemClick (item, index) {
				let _t = this
				if(item.status==1){
					uni.showModal({
						title: '激活提示',
						content: '激活成功后即开始计算视频卡时间\n\n激活卡号：' + item.card_no + '\n充值手机号：' + appInstance.globalData.userMobile,
						showCancel: true,
						confirmText: '激活',
						success: function(res) {
							if (res.confirm) {
								_t.handleSubmit(item);
							}
						}
					})
				}
			},
			
			getPageData () {
				let _t = this
				runGetVideoCard({
					params: {
						uid: this.userInfo.id,
						act: 'getUserVideoCard',
						page: this.page
					},
					success: res => {
						let list = _t.page == 1 ? [] : _t.list
						list = list.concat(res.data.data)
						_t.list = list
						_t.isEmpty = res.data.data < 10
						_t.loadingMore = false
						_t.loaded = true
					},
					fail: res => {
						_t.isEmpty = true
						_t.loadingMore = false
						_t.loaded = true
					},
					error: () => {
						_t.isEmpty = true
						_t.loadingMore = false
						_t.loaded = true
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #333;
	}
</style>

<style lang="less" scoped>
.list{
	padding: 30px 20px;
	
	.item{
		overflow: hidden;
		border-radius: 20px 20px 0 0;
		margin-bottom: 30px;
		position: relative;
		
		.top{
			padding: 60px 30px;
			position: relative;
			background: linear-gradient(to left, #fd8d71 , #e42c2c);
			
			&.success{
				background: linear-gradient(to left,#3db9dd , #2c88e4);
			}
			&.done{
				background: linear-gradient(to left,#aaa , #666);
			}
			
			.h1{
				font-size: 48px;
				color: #fff;
				position: absolute;
				top: 40px;
				right: 40px;
			}
			
			.h2{
				font-size: 32px;
				color: #fff;
				margin-bottom: 40px;
			}
			
			.p{
				font-size: 28px;
				color: #fff;
			}
			
			.a{
				position: absolute;
				bottom: 48px;
				right: 160px;
				color: #fff;
				font-size: 24px;
				border: 1px solid #fff;
				padding: 10px 20px;
				border-radius: 12px;
			}
		}
		
		.bottom{
			background: #f5f5f5;
			padding: 20px 30px;
			
			.p{
				font-size: 24px;
				color: #333;
			}
		}
		
		.icon{
			position: absolute;
			right: 20px;
			bottom: 20px;
			opacity: .8;
			
			&.success{
				opacity: .4;
			}
			&.done{
				opacity: .3;
			}
			
			image{
				width: 140px;
				height: 140px;
				vertical-align: bottom;
			}
		}
	}
}
</style>
